<template>
	<view class="main-page" style="padding-bottom: 120rpx;">
		<view class="head-img-container">
			<image :src="actDetailData.shopImg" class="head-img" mode="aspectFill"></image>
			<view class="head-img-shadow"></view>
		</view>
		<view class="title-container">
			<image class="back-ic" src="../../static/ic_back_white.png" @click="goBack"></image>
			<text class="font-fff-36 font-weight-600">活动详情</text>
		</view>
		
		<!-- 店铺信息 -->
		<view class="info-main">
			<image class="shop-img" :src="actDetailData.shopImg"></image>
			<view class="info-container">
				<view style="display: inline;vertical-align: middle;margin-right: 138rpx;">
					<image class="platform-ic" :src="actDetailData.brandImg" mode="heightFix"></image>
					<text class="act-name">{{actDetailData.shopName}}</text>
				</view>
				
				<view class="row-container mt-20">
					<view class="row-container">
						<image class="wh-22 mr-6" src="../../static/ic_star.png"></image>
						<text class="font-ff621f-24 font-weight-600">{{actDetailData.wmPoiScore}}</text>
					</view>
					<text class="font-666-24 ml-20">{{distanceStr}}</text>
					<view class="line"></view>
					<text class="font-666-24" v-if="actDetailData.monthSaleNumStr">月售{{actDetailData.monthSaleNumStr}}</text>
					<view class="line"></view>
					<text class="font-666-24">配送约{{actDetailData.deliveryTimeTip}}</text>
				</view>
				
				<view class="row-container mt-20">
					<view class="tag-box">
						<image class="tag-bg" src="../../static/bg_tag.png"></image>
						<text class="font-fff-24 font-weight-600" style="z-index: 40;">
							奖实付{{actDetailData.heightRate}}%</text>
					</view>
					<view class="tag-box">
						<image class="tag-bg" src="../../static/bg_tag.png"></image>
						<text class="font-fff-24 font-weight-600" style="z-index: 40;">
							最高奖{{actDetailData.returnAmount}}</text>
					</view>
					<view class="tag-box" v-if="actDetailData.checkComment == 0">
						<image class="tag-bg" src="../../static/bg_tag.png"></image>
						<text class="font-fff-24 font-weight-600" style="z-index: 40;">
							{{actDetailData.favourableCommentCount}}字{{actDetailData.favourableCommentImgCount}}图</text>
					</view>
					<view class="tag-box" v-if="actDetailData.checkComment == 1">
						<image class="tag-bg" src="../../static/bg_tag_blue.png"></image>
						<text class="font-fff-24 font-weight-600" style="z-index: 40;">
							无需评价</text>
					</view>
				</view>
				
				<view class="divider-line mt-20"></view>
				
				<view class="row-container width-100p height-88">
					<view class="row-container-center width-50p" @click="gotoOtherShop">
						<image class="wh-32 mr-4" src="../../static/ic_code_shop.png"></image>
						<text class="font-333-28 font-weight-600">进店下单</text>
					</view>
					<view class="short-line"></view>
					<view class="row-container-center width-50p" @click="handleCopy(actDetailData.shopName)">
						<image class="wh-32 mr-4" src="../../static/ic_copy_name.png"></image>
						<text class="font-333-28 font-weight-600">复制店名</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="prize-box">
			<view class="non-vip-box" v-if="checkVip != 1" 
			@click="gotoVipCenter">
				<image class="non-vip-bg" src="../../static/bg_non_vip.png"></image>
				<view class="row-container-row-between height-82 width-100p" style="z-index: 50;">
					<view class="row-container" style="z-index: 100;">
						<image class="non-vip-ic" src="../../static/ic_v.png"></image>
						<text class="font-ae6-26 font-weight-600">您还不是会员，升级会员每单多返{{actDetailData.serviceCharge ? actDetailData.serviceCharge : 2}}元</text>
					</view>
					<view class="row-container mr-24" style="z-index: 50;" v-if="hideVip != 1">
						<text class="be-vip">去升级</text>
						<image class="wh-12" src="../../static/ic_arrow_right_yellow.png"></image>
					</view>
				</view>
			</view>
			
			<view class="vip-box" v-if="checkVip == 1" @click="gotoVipCenter">
				<image class="vip-bg" src="../../static/bg_detail_vip.png"></image>
				<view class="row-container-row-between height-82 width-100p" style="z-index: 50;">
					<view class="row-container">
						<image class="wh-46 ml-24" src="../../static/ic_crown_detail.png"></image>
						<text class="font-ffeab4-26 font-weight-600 ml-8">尊贵的会员，您好</text>
						<text class="vip-text">有效期至：{{vipTime}}</text>
					</view>
					<view class="row-container mr-24 " style="z-index: 50;" v-if="hideVip != 1">
						<text class="font-ffeab4-24 font-weight-600">去续费</text>
						<image class="wh-12 ml-4" src="../../static/ic_arrow_right_yellow.png"></image>
					</view>
				</view>
			</view>
			
			<view class="prize-intro-box">
				<view class="row-container-row-between width-100p">
					<text class="font-333-28 font-weight-600">奖励说明</text>
					<text class="font-ff4646-28 font-weight-600" style="flex-shrink: 0;" v-if="actDetailData.surplusCount == 1">最后一席</text>
					<text class="font-ff4646-28" style="flex-shrink: 0;" v-else-if="actDetailData.surplusCount == 0">全部售罄</text>
					<text class="font-ff4646-28 font-weight-600" style="flex-shrink: 0;" v-else-if="actDetailData.surplusCount / actDetailData.joinCount > 0.2">剩余充足</text>
					<text class="font-ff4646-28" style="flex-shrink: 0;" v-else>即将报满</text>
				</view>
				
				<view class="row-container mt-20">
					<text class="vip-member">会员</text>
					<text class="font-e94-26 font-weight-600">无实付要求，奖实付金的{{actDetailData.heightRate}}%，最高{{actDetailData.returnAmount}}元</text>
				</view>
				<view class="row-container mt-14">
					<text class="non-vip-member">非会员</text>
					<text class="font-ae6-26 font-weight-600">无实付要求，奖实付金的{{actDetailData.notVipHeightRate}}%，最高{{actDetailData.notVipHeightAmount}}元</text>
				</view>
				
				<text class="font-666-24 mt-16">*奖励金只保留小数点后2位</text>
			</view>
		</view>
		
		<view class="condition-box">
			<view class="row-container">
				<text class="font-333-28 font-weight-600">评价说明</text>
				<text class="font-333-28 ml-32" v-if="actDetailData.checkComment == 0">{{actDetailData.favourableCommentCount}}字{{actDetailData.favourableCommentImgCount}}张图</text>
				<image class="five-star" src="../../static/ic_five_star.png" v-if="actDetailData.checkComment == 0"></image>
				<text class="font-333-28 ml-32" v-if="actDetailData.checkComment == 1">无需品鉴</text>
			</view>
		</view>
		
		<!-- 特殊说明 -->
		<view class="condition-box" style="background: #FFE3D8;">
			<text class="font-ff621f-30 font-weight-600">特殊说明（一定要阅读）</text>
			<text class="font-ff621f-28 mt-20"
			 style="line-height: 42rpx;">1、报名手机号码必须与美团账号手机号码一致，否则无法奖励
			2、先报名，后下单，再支付，否则无法奖励
			3、拼好饭、神枪手和购买准时宝的订单无法奖励
			4、报名后请在30分钟内下单，下单后会有4个小时的时间完成订单，订单不要跨天，否则无法奖励</text>
		</view>
		
		<!-- 美团手机号 -->
		<view class="condition-box" @click="openOrderMobileWindow">
			<view class="row-container-row-between width-100p">
				<text class="font-333-28 font-weight-600">美团账户号码</text>
				<view class="row-container">
					<text class="font-333-28" v-if="orderMobile">{{orderMobile}}</text>
					<text class="font-333-28" v-else>请设置点餐号码</text>
					<image class="wh-16 ml-4" src="../../static/ic_arrow_right_black.png"></image>
				</view>
			</view>
			<text class="font-ff621f-26 mt-10">*请确保报名手机与美团账户手机一致</text>
		</view>
		
		<!-- 品鉴规则 -->
		<view class="memo-container">
			<text class="font-333-28 font-weight-600">品鉴规则</text>
			<text class="font-666-28 mt-20" style="line-height: 36rpx;">1.先抢名额后下单，下单店铺必须与抢名额的店铺一致且必须在报名当天下单，否则无法获得奖励；</text>
			<text class="font-666-28 mt-16" style="line-height: 36rpx;">2.填写的报名手机号必须和本单美团点餐账号绑定的美团手机号一致，否则无法获得奖励；</text>
			<text class="font-666-28 mt-16" style="line-height: 36rpx;">3.报名后请勿修改美团账号所绑定的手机号，否则无法获得奖励。若下单后发生修改手机号的行为，视为自动放弃活动；</text>
			<text class="font-666-28 mt-16" style="line-height: 36rpx;">4.同一会员账号，同一店铺，当天只能参加一次活动，若报名后产生取消/退款订单行为，则视为自动放弃活动，不支持二次重复报名；</text>
		</view>
		
		<view class="bottom-box">
			<view class="left-btn-box" @click="handleOpenCustomService">
				<image src="../../static/ic_msg.png" class="left-btn"></image>
				<text class="font-333-22 font-weight-600">客服</text>
			</view>
			<view class="left-btn-box" @click="gotoAsk">
				<image src="../../static/ic_question.png" class="left-btn"></image>
				<text class="font-333-22 font-weight-600">问答</text>
			</view>
			
			<!-- 进行中 且剩余份数大于0 显示报名 -->
			<view class="active-box" v-if="actDetailData.checkStatus == 1 && actDetailData.surplusCount > 0">
				<view class="full-active-btn" @click="clickShowConfirmWindow" >我要报名</view>
			</view>
			
			<!-- 进行中 且剩余份数小于1 显示已售罄 -->
			<view class="active-box" v-if="checkFar != 1 &&  actDetailData.checkStatus == 1 && actDetailData.surplusCount < 1">
				<view class="active-info" style="width: 50%;">
					<text class="font-fff-28 font-weight-600">已售罄</text>
				</view>
				<view class="active-btn" style="width: 50%;" @click="gotoHome">查看更多</view>
			</view>
		</view>
		
		<view style="width: 100%;" v-if="showAuthWindow">
			<AuthWindow></AuthWindow>
		</view>
		
		<view v-if="showUpdateInfoWindow" class="update-info-window">
			<view class="update-info-inner-window">
				<image class="update-info-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-44">完善个人信息</text>
				<text class="hint-content">为了给您带来更好的服务体验，请先完善个人信息~</text>
				<view class="row-container-center mb-44">
					<text class="cancel-btn" @click="showUpdateInfoWindow = false">我再想想</text>
					<text class="ok-btn" @click="gotoUpdateInfo">去完善</text>
				</view>
			</view>
		</view>
		
		<!-- 报名失败 -->
		<view v-if="showBuyFailedWindow" class="update-info-window">
			<view class="update-info-inner-window">
				<image class="update-info-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<image class="failed-ic" src="../../static/ic_buy_failed.png"></image>
				<text class="font-333-36 font-weight-600 mt-20">很抱歉，报名失败！</text>
				<text class="hint-content" style="margin-left: 0rpx;margin-right: 0rpx;">{{buyFailedMsg}}</text>
				<text class="confirm" @click="showBuyFailedWindow = false">我知道了</text>
				<view class="rule-hint-container">
					<text class="font-333-28 mb-10">温馨提示</text>
					<text class="font-ff621f-28" style="text-align: center;font-weight: 500;">请不要尝试用不同微信号继续报名，再用同一个{{actDetailData.brandName}}APP账户继续下单，一旦发现账户永封！</text>
				</view>
			</view>
		</view>
		
		<!-- 去店铺点餐弹窗 -->
		<view class="to-shop-window" v-if="showToShopWindow">
			<view class="to-shop-box">
				<image class="to-shop-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600">去店铺点餐</text>
				<image class="shop-code-img" :src="actDetailData.shopCodeImg" :show-menu-by-longpress="true"></image>
				<view class="row-container" style="position: relative;">
					<text class="font-333-28 font-weight-600" style="z-index: 101;">长按二维码，进入店铺点餐</text>
					<view class="line-divider"></view>
				</view>
				<text class="font-666-28" style="padding: 32rpx;" @click="showToShopWindow=false">我再想想</text>
			</view>
		</view>
		
		<!-- 阅读提示弹窗 -->
		<view class="read-hint-window" v-if="showReadHintWindow">
			<view class="read-hint-box">
				<image class="top-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-44">温馨提示</text>
				<text class="hint-text">
					为了获得奖励，请仔细阅读页面中“报名须知（必读）”，严格按照商家要求完成订单。
				</text>
				<text class="read-btn" @click="handleCloseReadHintWindow">我知道了</text>
				<view class="row-container-center mb-30" @click="noShowHint = !noShowHint">
					<image class="check-icon" src="../../static/ic_chosen.png" v-if="noShowHint"></image>
					<image class="check-icon" src="../../static/ic_choose_not.png" v-if="!noShowHint"></image>
					<text class="font-666-28">我已知晓，不再提示</text>
				</view>
				
			</view>
		</view>
		
		<!-- 设置点单号码的弹窗 -->
		<view class="read-hint-window" v-if="showOrderMobileWindow">
			<view class="read-hint-box">
				<image class="top-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-34">设置美团点餐号码</text>
				<text class="hint-text" style="margin-top: 24rpx;text-align: left;">
					请填写美团下单账号绑定的手机号号码，用于核对美团订单信息，填写错误将无法获得美团订单返利。
				</text>
				<view class="mobile-input-box">
					<input 
						v-model="inputOrderMobile"
						class="font-333-28 font-weight-600"
						placeholder="请输入美团点餐号码"
						placeholder-class="font-999-28"
					/>
					
					<image class="wh-34" src="../../static/ic_clear.png" v-if="inputOrderMobile" 
					@click="inputOrderMobile = ''"></image>
				</view>
				<text class="font-999-28 mt-20 ml-44 mr-44">绑定成功后，您可以点击我的-设置-美团账号手机号进行修改</text>
				<view class="row-container-center mb-44 mt-44">
					<text class="cancel-btn" @click="showOrderMobileWindow = false">取消</text>
					<text class="ok-btn" @click="handleSetOrderMobile">确认绑定</text>
				</view>
			</view>
		</view>
		
		<!-- 报名确认 -->
		<view class="confirm-window-main" v-if="showConfirmWindow">
			<view class="confirm-window-inner">
				<view class="top-bg"></view>
				<view class="confirm-window-box">
					<text class="font-333-36 font-weight-600">确认下单</text>
					<view class="mobile-box mt-40">
						<view class="row-container-row-between">
							<view class="row-container">
								<text class="font-333-28 font-weight-600">下单手机号确认：</text>
								<text class="font-333-28">{{orderMobile}}</text>
							</view>
							<view class="row-container" @click="clickModifyOrderMobile">
								<text class="font-333-28 font-weight-600">修改</text>
								<image class="wh-16" src="../../static/ic_arrow_right_black.png"></image>
							</view>
						</view>
						<text class="font-ff621f-26 mt-24">温馨提示：请确认输入的手机号与美团外卖下单手机号为同一手机号，否则将无法返利</text>
					</view>
					<view class="mobile-box mt-20">
						<text class="font-333-32 font-weight-600">活动信息</text>
						<view class="row-container-row-between width-100p mt-20">
							<text class="font-333-28">商家名称</text>
							<view class="row-container">
								<!-- <image class="wh-38" style="border-radius: 20rpx;" :src="actDetailData.shopImg"></image> -->
								<text class="window-shop-name">{{actDetailData.shopName}}</text>
							</view>
						</view>
						<view class="row-container-row-between width-100p mt-20" >
							<text class="font-333-28">指定平台</text>
							<image class="brand-ic" :src="actDetailData.brandImg" mode="heightFix"></image>
						</view>
						<text class="font-ff621f-24 mt-8">*请在指定的平台下单，在非指定平台下单视为无效</text>
						<view class="row-container mt-20 width-100p">
							<text class="font-333-28">品鉴类型：</text>
							<text class="font-333-28 font-weight-600" v-if="actDetailData.checkComment == 0">{{actDetailData.favourableCommentCount}}字{{actDetailData.favourableCommentImgCount}}张图</text>
							<text class="font-333-28 font-weight-600" v-if="actDetailData.checkComment == 1">无需品鉴</text>
						</view>
						<text class="font-333-28 mt-20">奖励说明</text>
						<view class="single-condition mt-20">
							<view class="row-container">
								<text class="vip-member">会员</text>
								<text class="font-e94-26 font-weight-600">无实付要求，奖实付金的{{actDetailData.heightRate}}%，最高{{actDetailData.returnAmount}}元</text>
							</view>
							<view class="row-container mt-14">
								<text class="non-vip-member">非会员</text>
								<text class="font-ae6-26 font-weight-600">无实付要求，奖实付金的{{actDetailData.notVipHeightRate}}%，最高{{actDetailData.notVipHeightAmount}}元</text>
							</view>
							<text class="font-ae6-22 mt-14" style="opacity: 0.6;">*奖励金额只保留2位小数</text>
						</view>
						<image class="to-open-vip" src="../../static/bg_open_vip_window.png"
						 @click="gotoVipCenter" v-if="hideVip != 1 && checkVip != 1"></image>
					</view>
					
					
					
					<view class="row-container-row-between width-100p mt-30">
						<text class="cancel-btn" @click="showConfirmWindow = false">取消</text>
						<text class="confirm-buy" @click="clickToBuy">立即报名</text>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import timeUtils from '../../utils/time.js'
	import AuthWindow from '../../components/authWindow.vue'
	import fullImageWindow from '../../components/fullImageWindow.vue'
	
	export default {
		data() {
			return {
				actId:'' , //活动id
				status:1,  // 0未支付  1已支付 
				actDetailData:{
					surplusCount:0,
					returnAmount:"0",
					fullAmount:"0",
					favourableCommentCount:"0",
					favourableCommentImgCount:'0',
					startTime:'00:00',
					endTime:'00:00',
					integral:0,
					brandName:'',
					platformAmount:0
				} , //活动详情
				tipsList:[] , // 要求的列表
				showAuthWindow:false,
				showUpdateInfoWindow:false , // 显示去完善信息的弹窗
				showConfirmWindow:false , //确认报名弹窗
				showBuyFailedWindow:false , //报名失败弹窗
				buyFailedMsg:"" , // 报名失败原因
				joinPeopleCount:'0' , // 加群人数
				
				orderNo:'' , //创建订单时的orderNo
				showToShopWindow:false , //是否显示去店铺下单的弹窗
				
				isPageScroll:false , // 当前页面是否在滚动
				showReadHintWindow:false , // 阅读提示弹窗
				noShowHint:false,
				checkPayOrder:0 , // 是否需要支付  1不需要支付
				
				longitude:'' , 
				latitude:'',
				checkFar:0 , // 是否距离过远  距离过远不可点单
				
				orderMobile:'' , //点单号码
				showOrderMobileWindow:false , // 设置修改点单号码的弹窗
				inputOrderMobile:'' , // 弹窗中输入的点单号码
				
				distanceStr:'' ,// 距离
				checkVip:0 , // 0非 1是 vip
				vipTime:'' , // Vip到期时间
				
				hideVip:0 , // 是否隐藏vip入口
			}
		},
		
		onLoad(options) {
			this.loadUserDetail()
			
			if (options.actData){
				this.actDetailData = JSON.parse(decodeURIComponent(options.actData))
				if (this.actDetailData.clickMonitorUrl){
					this.loadMtUrl()
				}
			}
			
			if (options.distanceStr){
				this.distanceStr = options.distanceStr
			}
			
			if (!this.cookie.get("sp_no_show_read_hint")){
				this.showReadHintWindow = true
			}
			
			let that = this
			uni.$on("authCancel" , ()=>{
				that.showAuthWindow = false
			})
		},
		
		onShow() {
			this.loadCheckVip()
			// this.joinPeopleCount = getApp().globalData.groupPeopleCount
		},
		
		components:{
			AuthWindow,
		},
		
		methods: {
			//检测是否显示vip入口
			loadCheckVip(){
				let that = this
				this.http({
					url:"/common/checkVipShow",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.hideVip = data.data
						}
					},
					failed(e){
					}
				})
			},
			
			//调用一个链接
			loadMtUrl(){
				uni.request({
					url:'https:' + this.actDetailData.clickMonitorUrl,
					method:'GET',
					dataType: "json",
					sslVerify: false, //	是否验证ssl证书
					success() {
						
					}
				})
			},
			
			loadUserDetail(){
				let that = this
				this.http({
					url:"/user/userCenter",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.cookie.set("jx_nickname" , data.data.nickName)
							that.cookie.set("jx_avatar" , data.data.headImg)
							that.cookie.set("jx_mobile" , data.data.mobile)
							that.checkVip = data.data.checkVip
							that.vipTime = data.data.vipTime
							that.orderMobile = data.data.mobile
						}
					},
					failed(e){
					}
				})
			},
			
			loadGroupImgAndCount(){
				let that = this
				this.http({
					url:'/common/platform/img',
					method:'POST',
					hideLoading:true,
					data:{
						longitude : that.longitude,
						latitude : that.latitude
					},
					success(res){
						if (res.code == 200 && res.data){
							getApp().globalData.groupId = res.data.id
							getApp().globalData.groupPeopleCount = res.data.joinCount
							getApp().globalData.groupImg = res.data.platformImg
							getApp().globalData.address = res.data.address
							that.joinPeopleCount = res.data.joinCount
						}
					},
					failed(e){
					}
				})
			},
			
			gotoHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			
			goBack(){
				let pages = getCurrentPages()
				if (pages.length <= 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				} else{
					uni.navigateBack()
				}
				
			},
			
			handleCloseReadHintWindow(){
				this.showReadHintWindow = false
				if (this.noShowHint){
					this.cookie.set("sp_no_show_read_hint" , true)
				} 
			},
			
			//会员升级
			gotoVipCenter(){
				if (this.hideVip != 1){
					uni.navigateTo({
						url:'/pages/mine/vipCenter'
					})
				}
			},
			
			gotoOtherShop(){
				//有wxPath  跳转小程序
				uni.navigateToMiniProgram({
					appId:'wx2c348cf579062e56',
					path:this.actDetailData.wxPath
				})
			},
			
			clickShowConfirmWindow(){
				if (!this.cookie.get('jx_token')){
					this.showAuthWindow = true
					return
				}
				
				if (!this.cookie.get("jx_mobile")){
					this.showUpdateInfoWindow = true
					return
				}
				
				if (!this.orderMobile){
					this.showOrderMobileWindow = true
					return
				}
				
				this.showConfirmWindow = true
			},
			
			//点击复制
			handleCopy(val ){
				let that = this
				uni.setClipboardData({
					data: val,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			
			//点击报名  首先创建订单  然后使用orderNo下单
			clickToBuy(){
				let that = this
				this.http({
					url:'/user/order/mt/createOrder',
					method:"POST",
					data:{
						poiEventId:that.actDetailData.poiEventId,
						shopName:that.actDetailData.shopName,
						wxPath:that.actDetailData.wxPath,
						heightAmount:that.actDetailData.returnAmount,
						heightRate:that.actDetailData.heightRate,
						mobile:that.orderMobile,
						meituanPvId:that.actDetailData.meituanPvId,
						shopImg:that.actDetailData.shopImg,
						checkComment:that.actDetailData.checkComment,
						type:that.config.withdrawType
					},
					success(res){
						if (res.code == 200){
							that.orderNo = res.data.orderNo
							that.payDone()
						} else{
							that.showConfirmWindow = false
							that.buyFailedMsg = res.msg
							that.showBuyFailedWindow = true
						}
						
					},
					failed(e){
						that.showConfirmWindow = false
					}
				})
			},
			
			//支付完成
			payDone(){
				uni.showToast({
					title:'支付成功',
					icon:'none'
				})
				this.showConfirmWindow = false
				uni.$emit("refreshOrderList")
				uni.redirectTo({
					url:'/pages/order/officialOrderDetail?orderNo=' + this.orderNo
				})
			},
			
			//去完善信息
			gotoUpdateInfo(){
				this.showUpdateInfoWindow = false
				uni.navigateTo({
					url:'/pages/mine/profile'
				})
			},
			
			gotoAsk(){
				if (this.actDetailData && this.actDetailData.articleUrl){
					uni.navigateTo({
						url:'/pages/index/web?webUrl=' + encodeURIComponent(this.actDetailData.articleUrl)
						// url:'/pages/index/web?webUrl=https://mp.weixin.qq.com/s/sNFG3fkr18DeCHUDYPdMlQ'
					})
				}
			},
			
			//打开客服聊天
			handleOpenCustomService(){
				//https://work.weixin.qq.com/kfid/kfcba1f86f08779f062
				console.log('serviceUrl------' + this.cookie.get('customServiceUrl'))
				uni.openCustomerServiceChat({
					corpId:this.config.corpId ,
					extInfo: {url: this.cookie.get('customServiceUrl')},
					success(res){
						
					},
					fail(e){
						console.log('eeeeeeee-----' + JSON.stringify(e))
					}
				})
			},
			
			openOrderMobileWindow(){
				this.inputOrderMobile = this.orderMobile
				this.showOrderMobileWindow = true
			},
			
			//设置手机号
			handleSetOrderMobile(){
				if (!this.inputOrderMobile) {
					uni.showToast({
						title:'请输入美团点餐号码',
						icon:'none'
					})
					return
				}
				this.orderMobile = this.inputOrderMobile
				this.showOrderMobileWindow = false
			},
			
			//修改手机号
			clickModifyOrderMobile(){
				this.showConfirmWindow = false
				this.inputOrderMobile = this.orderMobile
				this.showOrderMobileWindow = true
			}
			
		}
	}
</script>

<style lang="scss">
	.head-img-container{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 330rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		
		.head-img{
			width: 100%;
			height: 330rpx;
		}
		
		.head-img-shadow{
			width: 100%;
			height: 330rpx;
			background: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 11;
		}
	}
	
	.title-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		margin-top: 100rpx;
		z-index: 40;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			padding: 0rpx 22rpx;
			position: absolute;
			left: 0rpx;
		}
	}
	
	.info-main{
		display: flex;
		flex-direction: column;
		width: 100%;
		position: relative;
		margin-top: 49rpx;
		
		.shop-img{
			width: 110rpx;
			height: 110rpx;
			position: absolute;
			top: 0rpx;
			right: 54rpx;
			border-radius: 10rpx;
			z-index: 45;
		}
	}
	
	.info-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		padding: 24rpx 24rpx 14rpx 24rpx;
		background-color: white;
		margin: 16rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid #E8E8E8;
		border-radius: 16rpx;
		z-index: 40;
		
		.tag-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 40rpx;
			width: 160rpx;
			position: relative;
			margin-right: 12rpx;
			
			.tag-bg{
				width: 160rpx;
				height: 44rpx;
				position: absolute;
			}
		}
		
		.divider-line{
			width: 100%;
			height: 1rpx;
			background: #EEEEEE;
		}
		
		.short-line{
			width: 1rpx;
			height: 26rpx;
			background: #EEEEEE;
		}
	}
	
	.act-name{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height:40rpx;
	}
	
	.prize-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		margin: 0rpx 30rpx;
		height: 328rpx;
		position: relative;
		
		.prize-intro-box{
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 82rpx;
			z-index: 50;
			width: calc(100% - 48rpx);
			padding: 24rpx;
			background: white;
			border-radius: 16rpx;
			
			.vip-member{
				width: 76rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				background: linear-gradient(90deg, #FF6359 0%, #E3463C 100%);
				color: #FFF5DD;
				font-size: 20rpx;
				font-weight: 600;
				margin-right: 20rpx;
				border-radius: 9rpx;
			}
			
			.non-vip-member{
				width: 74rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				background: linear-gradient(135deg, #FFEBCB 0%, #FFF0D8 100%);
				border: 2rpx solid #F9E5C6;
				color: #AE6B3C;
				font-size: 20rpx;
				font-weight: 600;
				margin-right: 20rpx;
				border-radius: 9rpx;
			}
			
		}
	}
	
	.line{
		width: 1rpx;
		height: 22rpx;
		background-color: #999999;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	
	.vip-box{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 148rpx;
		position: relative;
		
		.vip-bg{
			width: 100%;
			height: 148rpx;
			position: absolute;
		}
		
		.vip-text{
			background: #372D25;
			color: #FFEAB4;
			padding: 4rpx 10rpx;
			font-size: 20rpx;
			border-radius: 6rpx;
			margin-left: 11rpx;
		}
		
	}
	
	
	.tips-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		margin-right: 30rpx;
		
		.tips-ic{
			width: 8rpx;
			height: 34rpx;
			margin-right: 16rpx;
		}
	}
	
	
	.platform-ic{
		width: auto;
		height: 36rpx;
		margin-right: 8rpx;
	}
	
	.time-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: calc(100% - 108rpx);
		height: 78rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		padding: 0rpx 24rpx;
		background: white;
		border-radius: 16rpx;
	}
	
	.single-condition{
		display: flex;
		flex-direction: column;
		width: calc(100% - 38rpx);
		padding: 18rpx 19rpx;
		background: rgba(255, 209, 0, 0.1);
		border-radius: 10rpx;
		
		.vip-member{
			width: 76rpx;
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			background: linear-gradient(90deg, #FF6359 0%, #E3463C 100%);
			color: #FFF5DD;
			font-size: 20rpx;
			font-weight: 600;
			margin-right: 20rpx;
			border-radius: 9rpx;
		}
		
		.non-vip-member{
			width: 74rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			background: linear-gradient(135deg, #FFEBCB 0%, #FFF0D8 100%);
			border: 2rpx solid #F9E5C6;
			color: #AE6B3C;
			font-size: 20rpx;
			font-weight: 600;
			margin-right: 20rpx;
			border-radius: 9rpx;
		}
		
		.dish-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(50% - 13rpx);
			height: 214rpx;
			background: white;
			border-radius: 10rpx;
			
			.dish-img{
				width: calc(100% - 20rpx);
				height: 138rpx;
				margin: 10rpx 10rpx 13rpx 10rpx;
			}
			
			.copy-dish{
				width: 130rpx;
				height: 42rpx;
				background: #FFD100;
				text-align: center;
				line-height: 42rpx;
				margin-top: 12rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #333333;
				border-radius: 10rpx;
				margin-bottom: 17rpx;
			}
			
		}
	}
	
	.non-vip-box{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 148rpx;
		position: relative;
		
		.non-vip-bg{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		
		.non-vip-ic{
			width: 46rpx;
			height: 46rpx;
			margin-left: 24rpx;
			margin-right: 6rpx;
		}
		
		.be-vip{
			margin-right: 4rpx;
			color: #AE6B3C;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
	
	
	.condition-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		margin: 20rpx 30rpx 0rpx 30rpx;
		padding: 24rpx;
		background: white;
		border-radius: 16rpx;
		
		.five-star{
			width: 166rpx;
			height: 30rpx;
			margin-left: 12rpx;
		}
		
	}
	
	
	.memo-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		padding: 18rpx 24rpx;
		margin: 20rpx 30rpx 30rpx 30rpx;
		background-color: white;
		border-radius: 16rpx;
		
		.hide-btn{
			width: 155rpx;
			height: 52rpx;
			background: #F5F5F5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			
			.arrow{
				width: 18rpx;
				height: 18rpx;
				margin-left: 4rpx;
			}
		}
	}
	
	.step-box{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: calc(100% - 108rpx);
		margin: 20rpx 30rpx 30rpx 30rpx;
		background: white;
		border-radius: 16rpx;
		padding: 24rpx;
		
		.step-dot{
			width: 20rpx;
			height: 20rpx;
			z-index: 20;
		}
		
		.step-line{
			width: 2rpx;
			height: 420rpx;
			position: absolute;
			top: 20rpx;
		}
		
		.step-title{
			color: #333333;
			font-size: 28rpx;
			line-height: 39rpx;
			font-weight: 600;
			margin-bottom: 8rpx;
		}
		
		.step-content{
			color: #999999;
			font-size: 24rpx;
			line-height: 34rpx;
		}
	}
	
	
	.count-down-text{
		color: #333333;
		font-size: 68rpx;
		font-weight: 600;
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
	}
	
	.buy-success-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 236rpx);
			padding: 0 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.top-ic{
				width: 108rpx;
				height: 108rpx;
				margin-top: 50rpx;
				margin-bottom: 20rpx;
			}
			
			.code-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border: 1px dashed #FF621F;
				border-radius: 10px;
				width: calc(100% - 152rpx);
				padding: 32rpx;
				margin: 40rpx 44rpx 0rpx 44rpx;
				
				.code-hint{
					color: #FF621F;
					font-weight: bold;
					font-size: 32rpx;
					text-align: center;
				}
				
				.code-small{
					width: 242rpx;
					height: 242rpx;
					margin-top: 32rpx;
				}
				
			}
		}
	}
	
	.update-info-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.update-info-inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 236rpx);
			padding: 0 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.update-info-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.failed-ic{
				width: 108rpx;
				height: 108rpx;
				margin-top: 50rpx;
			}
			
			.hint-content{
				color: #666666;
				font-size: 28rpx;
				margin-left: 70rpx;
				margin-right: 70rpx;
				text-align: center;
				margin-top: 10rpx;
				margin-bottom: 40rpx;
			}
			
			.content-str{
				text-align: center;
				margin-left: 36rpx;
				margin-right: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 40rpx;
				color: #FF621F;
				font-size: 28rpx;
			}
			
			.cancel-btn{
				width: 246rpx;
				height: 88rpx;
				background: #F5F5F5;
				border: 2rpx solid #E0E0E0;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 28rpx;
			}
			
			.ok-btn{
				width: 246rpx;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-left: 15rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 600;
			}
			
			.confirm{
				width: 100%;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				color: #333333;
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
				line-height: 88rpx;
				margin-bottom: 23rpx;
			}
			
			.rule-hint-container{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc(100% - 44rpx);
				padding: 22rpx;
				background:  #F5F5F5;
				border-radius: 10rpx;
				margin-bottom: 44rpx;
			}
			
		}
	}
	
	.add-group-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 108rpx);
		margin: 20rpx 30rpx 30rpx 30rpx;
		padding: 30rpx 24rpx;
		background: white;
		border-radius: 16rpx;
		
		.add-btn{
			color: #333333;
			font-size: 28rpx;
			font-weight: 600;
			padding: 6rpx 26rpx;
			background: #FFD100;
			border-radius: 6rpx;
			margin-left: 20rpx;
		}
		
		.logo-ic{
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 54rpx);
		height: 120rpx;
		background: white;
		position: fixed;
		bottom: 0;
		z-index: 50;
		padding-left: 24rpx;
		padding-right: 30rpx;
		
		.left-btn-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0rpx 15rpx;
			flex-shrink: 0;
			
			.left-btn{
				width: 38rpx;
				height: 38rpx;
				margin-bottom: 8rpx;
			}
		}
		
		.active-box{
			display: flex;
			flex-direction: row;
			width: 518rpx;
			
			.active-info{
				display: flex;
				flex-direction: column;
				width: 338rpx;
				height: 88rpx;
				background: #212127;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				align-items: center;
				justify-content: center;
			}
			
			.active-btn{
				width: 180rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #FFD100;
				color: #333333;
				font-weight: 600;
				font-size: 32rpx;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
			}
			
			.full-active-btn{
				width: 518rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #FFD100;
				color: #333333;
				font-weight: 600;
				font-size: 32rpx;
				border-radius: 50rpx;
			}
		}
		
		.not-start-box{
			width: 496rpx;
			height: 88rpx;
			background: linear-gradient(270deg, #FF4646 0%, #FF9E68 100%);
			text-align: center;
			line-height: 88rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: white;
			font-weight: 400;
		}
		
	}
	
	.to-shop-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.to-shop-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% - 148rpx);
			margin-left: 74rpx;
			margin-right: 74rpx;
			padding-top: 44rpx;
			background: white;
			border-radius: 30rpx;
			position: relative;
			
			.to-shop-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.shop-code-img{
				width: 380rpx;
				height: 380rpx;
				margin-top: 44rpx;
				margin-bottom: 32rpx;
			}
			
			.line-divider{
				width: 333rpx;
				height: 9rpx;
				background: linear-gradient(90deg, #FFC01F 0%, rgba(255, 192, 31, 0) 100%);
				position: absolute;
				top: 28rpx;
			}
			
		}
		
	}
	
	button::after {
		border: none;//去除边框
	}
	
	.read-hint-window{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		
		.read-hint-box{
			display: flex;
			flex-direction: column;
			position: relative;
			width: calc(100% - 148rpx);
			border-radius: 30rpx;
			background: white;
			align-items: center;
			
			.hint-text{
				width: calc(100% - 88rpx);
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: center;
			}
			
			.top-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.read-btn{
				width: calc(100% - 88rpx);
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
				text-align: center;
				line-height: 88rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
			}
			
			.check-icon{
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
			
			.mobile-input-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: calc(100% - 128rpx);
				height: 88rpx;
				margin-top: 24rpx;
				padding: 0rpx 20rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
			}
			
			.cancel-btn{
				width: 155rpx;
				height: 88rpx;
				background: #F5F5F5;
				border: 2rpx solid #E0E0E0;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 28rpx;
			}
			
			.ok-btn{
				width: 329rpx;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-left: 15rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 600;
			}
			
		}
	}
	
	.confirm-window-main{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		
		.confirm-window-inner{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			background: #F5F5F5;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			position: relative;
			
			.top-bg{
				width: 100%;
				height: 220rpx;
				background: linear-gradient(180deg, #FFF5C7 0%, rgba(255, 255, 255, 0) 100%);
				border-top-right-radius: 30rpx;
				border-top-left-radius: 30rpx;
				position: absolute;
				top: 0;
			}
			
			.to-open-vip{
				width: 100%;
				height: 70rpx;
			}
			
			.confirm-window-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc(100% - 60rpx);
				margin: 30rpx;
				z-index: 220;
				
				.mobile-box{
					width: calc(100% - 48rpx);
					background: white;
					border-radius: 16rpx;
					padding: 24rpx;
					display: flex;
					flex-direction: column;
					
					.window-shop-name{
						max-width: 416rpx;
						font-weight: 600;
						color: #333333;
						font-size: 28rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					
					.brand-ic{
						width: auto;
						height: 38rpx;
					}
				}
				
				.cancel-btn{
					width: 210rpx;
					height: 88rpx;
					background: white;
					border-radius: 10rpx;
					font-weight: 600;
					margin-right: 30rpx;
					text-align: center;
					line-height: 88rpx;
					color: #333333;
					font-size: 32rpx;
				}
				
				.confirm-buy{
					flex-grow: 1;
					height: 88rpx;
					background: #FFD100;
					border-radius: 10rpx;
					font-weight: 600;
					text-align: center;
					line-height: 88rpx;
					color: #333333;
					font-size: 32rpx;
				}
				
			}
		}
	}
	
	
	
</style>
